<!DOCTYPE html>
<html>

	<meta charset="UTF-8">
	<title>太极</title>

	<style type="text/css">
		.y1 {
			width: 200px;
			height: 100px;
			background-color: black;
			border-radius: 200px 200px 0 0;
			position: relative;
		}
		
		.y2 {
			width: 200px;
			height: 100px;
			background-color: white;
			border-radius: 0 0 200px 200px;
			position: relative;
		}
		
		.suby1 {
			width: 100px;
			height: 100px;
			border-radius: 50%;
			background-color: black;
			position: absolute;
			top: 50px;
			z-index: 10;
		}
		
		.suby2 {
			width: 100px;
			height: 100px;
			border-radius: 50%;
			background-color: white;
			position: absolute;
			top: -50px;
			right: 0px;
		}
		
		.suby3 {
			width: 30px;
			height: 30px;
			border-radius: 50%;
			background-color: black;
			position: absolute;
			left: 35px;
			top: 35px;
		}
		
		.sub4 {
			width: 30px;
			height: 30px;
			border-radius: 50%;
			background-color: white;
			position: absolute;
			left: 35px;
			top: 35px;
		}
		
		.taiji {
			width: 200px;
			height: 200px;
			border-radius: 50%;
			position: absolute;
			box-shadow: 10px 10px 10px #6E6568;
			left: 100px;
			top: 50px;
		}
		.d{
			background-color: beige;
			border: 1px solid;
		height: 400px;
		width: 80px;
		}
	</style>

	<body>

		<head>
			<div class="taiji">
				<div class="y1">
					<div class="suby1">
						<div class="sub4"></div>
					</div>

				</div>
				<div class="y2">
					<div class="suby2">
						<div class="suby3"></div>
					</div>
				</div>
			</div>
		</head>
		<div class="d">
		<button onclick="Divleft(10)">向右移动</button>
		<br />
		<br />
		<button onclick="Divleft(-10)">向左移动</button>
		<br />
		<br />
		<button onclick="Divtop(10)">向下移动</button>
		<br />
		<br />
		<button onclick="Divtop(-10)">向上移动</button>
		<br />
		<br />
		<button onclick="Divlefttop(10,10) ">向右下移动</button>
		<br />
		<br />
		<button onclick="Divlefttop(10,-10) ">向右上移动</button>
		<br />
		<br />
		<button onclick="Divlefttop(-10,10) ">向左下移动</button>
		<br />
		<br />
		<button onclick="Divlefttop(-10,-10) ">向坐上移动</button>
		</div>
		<script type="text/javascript">
			var l = 100;
			var t = 0;
			//点击按钮的时候向右移动
			//function Divleft() 
			function Divleft(arg)

			{
				//拿到太极对象
				var tj = document.querySelector(".taiji")
					//改变太极的坐标
					l = l + arg;
				tj.style.left = l + "px";
				

			}
			function Divtop(e)

			{
				//拿到太极对象
				var tj = document.querySelector(".taiji")
					//改变太极的坐标
					t = t +e;
				tj.style.top = t + "px";
				

			}
			function Divlefttop(x,y)

			{
				//拿到太极对象
				var tj = document.querySelector(".taiji")
					//改变太极的坐标
					t = t + y;
					l = l + x;
				tj.style.top  = t + "px";
				tj.style.left = l + "px";
				

			}
		</script>
	</body>

</html>